<template>
   <div class="header">
       <!-- 左侧返回按钮 -->
       <div class="back" @click="goBack">
           <i class="iconfont iconiconset0419"></i>
       </div>
       <!-- 中间页面标题 -->
       <div class="mine-title">
           团购详情
       </div>
       <!-- 首页按钮 -->
       <div class="home-logo" @click="collectFn">
           <i v-bind:class="[collectStatus?'iconfont iconshoucang1':'iconfont iconshoucang']"></i>
           <p>{{collectStatus?'收藏':'取消收藏'}}</p>
       </div>
   </div>
</template>
   
<script>
   export default {
       data () {
           return {
               collectStatus:true
           }
       },
       methods: {
           goBack(){
               this.$router.go(-1)
           },
           /**收藏和取消收藏 */
           collectFn(){
               this.collectStatus = !this.collectStatus
           }
       }
   }
</script>
   
<style scoped lang="less">
    .header{
        height: 1.346667rem;
        background: #2bcac1;
        display: flex;
        .back{
            width: 1.4rem;
            height: 1.346667rem;
            text-align: center;
            line-height: 1.346667rem;
            i{
                font-size: .666667rem;
            }
        }
        .mine-title{
            flex: 1;
            text-align: center;
            line-height: 1.346667rem;
            font-size: .48rem;
        }
        .home-logo{
            width: 1.4rem;
            height: 1.346667rem;
            text-align: center;
            display: flex;/**弹性布局 */
            color: #fff;
            flex-direction: column;/**改变排列方向 */
            justify-content: center;/**主轴方向居中对齐--因为此时主轴变成了y轴，所以此时的效果是垂直居中 */
            i{
                font-size: .48rem;
                color: #fff;/**#ffffff等价于 #fff，当两个字符相同时可以只写一个 */
                margin-bottom: .08rem;
            }
            p{
                font-size: .24rem;
            }
        }
    }
</style>